<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="keywords" content="">
  <title>Night</title>
  <link rel="stylesheet" href=""> 
  <!-- link bootstrap -->
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="bootstrap.min.js"></script> 
  <style>
    input[type='button'].active{
      background-color: red;
    }
  </style>
 </head>
 <body>
   <div class="container">
     <form class="form-horizontal col-md-offset-2 col-md-4">
      <div class="form-group">
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            玩游戏
          </label>
        </div>
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            看电影
          </label>
        </div>
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            旅游
          </label>
        </div>
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            煲剧
          </label>
        </div>
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            听歌
          </label>
        </div>
        <div class="checkbox">
          <label for="">
            <input type="checkbox">
            唱歌
          </label>
        </div>
        <div class="form-group">
          <input type="button" value="全选">
          <input type="button" value="全不选" class="active">
          <input type="button" value="反选">
        </div>
      </div>
    </form>
   </div>
    <script>
    const btn = document.querySelectorAll('input[type="button"]')
    const inpt = document.querySelectorAll('input[type="checkbox"]')
    const len = inpt.length;
    // 用于记录当前选中个数
    let count = 0 ;

    const isChecked = function(){
      switch (count) {
        case len:
          btn[0].className = 'active'
          btn[1].className = ''
          break;
          case 0:
          btn[0].className = ''
          btn[1].className = 'active'
          break;
        default:
          btn[0].className = ''
          btn[1].className = ''
          break;
      }
    }
    for(let i = 0 ; i < len ; i++){
      // 记录当前选择状态
      inpt[i].flag = false;
      inpt[i].onclick = function(){
        if(this.flag){
          inpt[i].checked = ''
          count--
        }else{
          inpt[i].checked = 'checked'
          count++
        }
        isChecked(count);
        this.flag = !this.flag;
      }
      //全选
      btn[0].onclick=function(){
        for (let i = 0; i < len; i++) {
          if(!inpt[i].flag){
            inpt[i].checked='checked'
            inpt[i].flag =true;
            count++
          }
          
        }
        this.checked=''
        btn[1].className=''
        isChecked(count);
      }
//全不选
    btn[1].onclick=function(){
        for (let i = 0; i < len; i++) {
          if(inpt[i].flag){
            inpt[i].checked=''
            inpt[i].flag =false;
            count--
          }
          
        }
        this.checked='checked'
        btn[0].className=''
        isChecked(count);
    }
    btn[2].onclick=function(){
        for (let i = 0; i < len; i++) {
          if(inpt[i].flag){
            inpt[i].checked=''
            inpt[i].flag =false;
            count--
          }
          else{
            inpt[i].checked='checked'
            inpt[i].flag =true;
            count++
          }
        }
        this.checked='checked'
        btn[0].className=''
        btn[2].className = 'active'
    }
    
     




    }
    console.log(btn);
    
    
    //反选
    
    </script>
 </body>
 </html>